<template>
    <el-row class="cdetail-row">
        <el-col :span="24">
            <el-card class="box-card tinfo-head-box">
                <div slot="header" class="clearfix">
                    <div class="tinfo-title-header-box" style="background-image:url('/static/img/illustration/i004.jpg')">
                    </div>
                </div>
                <el-row class="user-title-row">
                    <el-col :span="24">
                        <div class="T-headImage-box">
                            <div class="T-headImage" @click="uploadImage">
                                <img :src="datas.icon || '/static/img/userImage.png'" alt="">
                                <span class="T-msking-box"><i class="el-icon-picture-outline"></i></span>
                            </div>
                            <el-dialog title="上传头像" :visible.sync="uploadVisible" >
                                <el-upload
                                        class="avatar-uploader"
                                        :action="uploadUrl"
                                        :show-file-list="false"
                                        :on-success="handleAvatarSuccess"
                                        :before-upload="beforeAvatarUpload">
                                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                                </el-upload>
                                <div slot="footer" v-show="uploadSuccess" class="dialog-footer">
                                    <span style="color: red;margin-right: 10px">上传成功！</span>
                                    <el-button type="success" size="small" @click.native="uploadVisible = false">关闭</el-button>
                                </div>
                            </el-dialog>
                        </div>
                        <div class="T-name-box">
                            <h3>{{datas.name}}<span>{{datas.duty}}</span></h3>
                        </div>
                        <div class="clear"></div>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>
        <el-col :span="24">
            <el-card class="box-card tinfo-body-box">
                <div slot="header" class="clearfix">
                    <span class="card-tag">个人资料</span>
                    <el-button type="primary" size="small" style="float: right;" v-show="!isEditInfo" @click="editTInfoCheck">修改信息</el-button>
                    <el-button type="primary" size="small" style="float: right;" v-show="isEditInfo" @click="saveEditInfo" :loading="saveLoading">保存</el-button>
                    <el-button type="danger" size="small" style="float: right;" v-show="isEditInfo" @click="closeEditTInfo">取消</el-button>
                    <div class="clear"></div>
                </div>
                <div v-show="!isEditInfo">
                    <el-row>
                        <el-col :span="6">
                            <div class="">
                                <p>姓名：<span>{{datas.name}}</span></p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="">
                                <p>学号：<span>{{datas.schoolNumber}}</span></p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="">
                                <p>年级：<span>{{datas.entranceYear}}级</span></p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="">
                                <p>学院：<span>{{datas.departmentName}}</span></p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="">
                                <p>专业：<span>{{datas.specialtyName}}</span></p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="">
                                <p>班级：<span>{{datas.className}}</span></p>
                            </div>
                        </el-col>
                        <el-col :span="12">
                            <div class="">
                                <p>邮箱：<span>{{datas.email || '未知'}}</span></p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="">
                                <p>微信：<span>{{datas.wechat || '未知'}}</span></p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="">
                                <p>qq：<span>{{datas.qq || '未知'}}</span></p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="">
                                <p>手机号码：<span>{{datas.phone || '未知'}}</span></p>
                            </div>
                        </el-col>
                        <el-col :span="6">
                            <div class="">
                                <p>生日：<span>{{datas.birthday || '未知'}}</span></p>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <div class="">
                                <p>住址：<span>{{datas.homeAddress || '未知'}}</span></p>
                            </div>
                        </el-col>
                        <el-col :span="24">
                            <div class="">
                                <p>简介：<span>{{datas.intro || '未知'}}</span></p>
                            </div>
                        </el-col>
                    </el-row>
                </div>
                <div v-show="isEditInfo">
                    <el-form ref="" label-width="70px" class="demo-ruleForm info-form">
                        <el-row>
                            <el-col :span="6">
                                <el-form-item label="姓名">
                                    <el-input size="small" v-model="editTInfo.name" auto-complete="off" disabled=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="教师号">
                                    <el-input size="small" v-model="editTInfo.schoolNumber" auto-complete="off" disabled=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="年级">
                                    <el-input size="small" v-model="editTInfo.entranceYear" auto-complete="off" disabled=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="学院">
                                    <el-input size="small" v-model="editTInfo.departmentName" auto-complete="off" disabled=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="专业">
                                    <el-input size="small" v-model="editTInfo.specialtyName" auto-complete="off" disabled=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="班级">
                                    <el-input size="small" v-model="editTInfo.className" auto-complete="off" disabled=""></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="微信">
                                    <el-input size="small" v-model="editTInfo.wechat" auto-complete="off" placeholder="请输入您的微信"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="qq">
                                    <el-input size="small" v-model="editTInfo.qq" auto-complete="off" placeholder="请输入您的qq"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item label="邮箱">
                                    <el-input size="small" v-model="editTInfo.email" auto-complete="off" placeholder="请输入您的邮箱"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="6">
                                <el-form-item label="号码">
                                    <el-input size="small" v-model="editTInfo.phone" auto-complete="off" placeholder="请输入您的号码"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="9">
                                <el-form-item label="生日">
                                    <el-date-picker
                                            size="small"
                                            v-model="editTInfo.birthday"
                                            type="date"
                                            value-format="yyyy-MM-dd"
                                            placeholder="选择您的生日">
                                    </el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="住址">
                                    <el-input size="small" v-model="editTInfo.homeAddress" placeholder="请输入您的住址" auto-complete="off" ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="简介">
                                    <el-input type="textarea" v-model="editTInfo.intro" :autosize="{ minRows: 3, maxRows: 3}" placeholder="请输入您的简介"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </el-card>
        </el-col>
        <!--<el-col :span="24">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>最近动态</span>
                </div>
                <el-row v-if="ArticleData.length > 0">
                    <el-col :span="24">
                        <div v-for="data in ArticleData" class="article-content-col-box">
                            <h3 @click="$router.push({path:'/adetail?a='+data.id})"><i class="el-icon-star-off"></i>{{data.title}}</h3>
                            <div class="article-content">
                                <div class="bottom" style="padding: 0 10px">
                                    <span style="float: left">{{data.courseName}}&nbsp;-&nbsp;{{data.sectionName}}&nbsp;-&nbsp;{{data.knowledgePointName}}</span>
                                    <span style="float: right">浏览人数：{{data.visitorsNum}}</span>
                                    <span class="clear"></span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row v-else>
                    <el-col :span="24">
                        <p class="no-data-box">没有数据</p>
                    </el-col>
                </el-row>
            </el-card>
        </el-col>-->
    </el-row>
</template>

<script>
  import {searchUserData, upDateUserData, getArticleList} from '../../api/api';

  export default {
    data() {
      return {
        userId: '',
        saveLoading: false,
        datas:[],
        ArticleData:[],
        isEditInfo: false,
        editTInfo:[],
        uploadVisible:false,
        uploadUrl: '',
        imageUrl: '',
        uploadSuccess:'',
        headUrl:''
      };
    },

    methods: {
      editTInfoCheck:function () {
        this.isEditInfo = true;
        this.editTInfo = JSON.parse(JSON.stringify(this.datas));
      },

      uploadImage:function () {
        this.uploadVisible = true;
        this.uploadSuccess = false;
        this.uploadUrl = '/api/file/user/icon/upload?userId='+this.userId;
      },

      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        this.uploadSuccess = true;
        this.$message({
          message: '上传成功',
          type: 'success'
        });
        this.datas.icon = '';
        this.getSearchUserData(this.userId);
        this.$emit('searchData');
      },

      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isGIF = file.type === 'image/gif';
        const isPNG = file.type === 'image/png';
        const isBMP = file.type === 'image/bmp';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG && !isGIF && !isPNG && !isBMP) {
          this.$message.error('上传图片必须是JPG/GIF/PNG/BMP 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return (isJPG || isBMP || isGIF || isPNG) && isLt2M;
      },

      getArticleData(val){
        let para = {
          count: 10,
          pageNo: this.page,
          sortDirection: 'asc',
          sortField: ["createDate"],
          knowledgePointId: '',
          authorId: val,
          content: '',
          tag: '',
          title: '',
          atype: 2
        };
        getArticleList(para).then((res) => {
          this.ArticleData = res.data.data.content
        });
      },

      saveEditInfo:function () {
        console.log(this.editTInfo);
        let jsonStr = this.editTInfo;
        jsonStr.icon = this.headUrl;
        this.$confirm('确认修改吗？', '提示', {}).then(() => {
          upDateUserData(jsonStr).then((res) => {
            console.log(res);
            this.saveLoading = false;
            this.isEditInfo = false;
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.getSearchUserData(this.userId);
          });
        });
      },

      closeEditTInfo:function () {
        this.isEditInfo = false;
        this.editTInfo = [];
      },
      //获取用户数据
      getSearchUserData(val) {
        searchUserData(val).then((res) => {
          this.datas = res.data.data;
          this.headUrl = res.data.data.icon;
          if(this.datas.icon === ''){
          }else{
            this.datas.icon = 'http://192.168.31.154:8080/'+res.data.data.icon;
          }
        });
      },
    },

    mounted:function () {
      let user = sessionStorage.getItem('user');
      user = JSON.parse(user);
      this.userId = user.id;
      this.getSearchUserData(user.id);
      this.getArticleData(user.id);
    }
  };
</script>

<style>
    .avatar-uploader {
        text-align: center;
    }
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>